<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<span id="span01"></span><br />
			<span class="one" name="aaa"></span><br />
			<span></span><br />
			<span class="one" name="aaa"></span><br />
			<span></span><br />
			<span class="one"></span><br />
		</div>
		
		
		<script type="text/javascript">
			
			// 根据id查找 		getElemntById()
			// var span01 = document.getElementById("span01");
			span01.textContent = "O(∩_∩)O哈哈~";
			
			// 根据标签			getElementByTagName()
			var spans = document.getElementsByTagName("span");
			for(var i=0;i<spans.length;i++)
			{
				spans[i].textContent = "嘿嘿";
			}
			
			// 根据class查找
			var ones = document.getElementsByClassName("one");
			for(var i=0;i<ones.length;i++)
			{
				ones[i].style.background = "#00ff00";
			}
			
			var names = document.getElementsByName("aaa");
			for(var i=0;i<names.length;i++)
			{
				names[i].style.color = "#ffffff";
			}
			
			// querySelector("css选择器")   查找第一符合css选择器的元素
			// querySelectAll("css选择器")   查找所有符合css选择器的元素
			
			document.querySelector(".one").style.background = "#ff0000";
		</script>
	</body>
</html>
